<template>
  <div class="app-wrap lh1">
    <div class="section">
      <count-textarea v-model="form.content" placeholder="说点什么吧......" :contentNum="500" :height="311" :disabled="disabled"  :autoHeight="false">
         <div class="textarea_btn" @click.stop="chooseSpeech">选择模板话术</div>
      </count-textarea>
      <div class="upload_wrap">
         <uploader
      :imgList.sync="imgList"
	  :disabled="disabled"
      :size="170"/>
      </div>
    </div>
    <div class="section">
      <!-- <picker :range="stageList" range-key="name" @change="onStageConfirm" :value="stageIndex"> -->
        <uni-list-item v-if="option.editStatus !='edit'" title="选择装修阶段" :custom="true" @click="chooseStage">
            <span :class="{ph: !stageTxt}">{{stageTxt ? stageTxt+'阶段' : '请选择'}}</span>
        </uni-list-item>
      <!-- </picker> -->

        <uni-list-item title="发布日期" :custom="true" @click="showDateTime">
            <span :class="{ph: !form.publish_time}">{{form.publish_time ? form.publish_time : '请选择'}}</span>
        </uni-list-item>

      <date-time-picker ref="dateTime" @submit="dateTimeSubmit" color="#FFD11A"/>

    </div>

    <div class="confirm_btn" @click="publish" v-if="!disabled">发布</div>
  </div>
</template>

<script>
import countTextarea from '@/components/AppFiledTextarea'
import uploader from '@/components/App_uploader'
import dateTimePicker from '@/components/simple-datetime-picker'
import uniList from '@/components/uni-list/uni-list'
import uniListItem from '@/components/uni-list-item/uni-list-item'
import { updateSite, modifyReport, getReportInfo } from '@/api/constructionSite'

export default {
	name: 'EditConstructionSite',
	components: {
		uploader,
		countTextarea,
		dateTimePicker,
		uniList,
		uniListItem
	},
	data() {
		return {
			form: {
				content: '',
				stage_id: '',
				publish_time: ''
			},
			disabled: false,
			imgList: [],
			stageIndex: 0,
			stageTxt: '',
			stageList: [],
			option: {}
		}
	},
	onLoad(option) {
		this.option = option
		if (option.content) {
			this.form.content = decodeURIComponent(option.content)
		}
		if (option.stage_txt) {
			this.stageTxt = decodeURIComponent(option.stage_txt)
		}
		if (option.stage_id) {
			this.form.stage_id = option.stage_id
		}
		if (option.publish_time) {
			this.form.publish_time = option.publish_time
		}
		if (option.imgPath) {
			this.imgList = option.imgPath.split(',')
		}
		this.disabled = option.is_my == 0
		// 修改
		if (!this.$util.isEmpty(this.option.editStatus) && this.option.editStatus == 'edit') {
			this.form = {
				content: '',
				publish_time: '',
				id: ''
			}
			uni.setNavigationBarTitle({
				title: '修改直播'
			})
			this.getInfo()
		}
	},
	methods: {
		getInfo() {
			getReportInfo({
				id: this.option.liveId
			}).then(res => {
				Object.keys(this.form).forEach(i => {
					this.form[i] = res.data.info[i]
					if (i == 'publish_time') {
						this.form.publish_time = this.$util.$formatDate(this.form.publish_time * 1000)
					}
				})
				this.imgList = this.$util.isEmpty(res.data.info.img_list) ? [] : res.data.info.img_list
			})
		},
		edit() {
			modifyReport(this.form).then(() => {
				uni.showToast({
					title: '更新成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/constructionSite/detail?id=${this.option.id}`
					})
				}, 500)
			})
		},
		publish() {
			let flag = true
			Object.keys(this.form).forEach(item => {
				if (!this.form[item]) {
					flag = false
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
				}
			})
			if (flag) {
				if (this.imgList.length) {
					this.form.img_list = this.imgList
				}
				if (!this.$util.isEmpty(this.option.editStatus) && this.option.editStatus == 'edit') {
					this.edit()
				} else {
					this.form.site_info_id = this.option.site_info_id
					updateSite(this.form).then(() => {
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/constructionSite/detail?id=${this.option.id}`
							})
						}, 500)
					})
				}
			}
		},
		chooseStage() {
			if (this.disabled) {
				return
			}
			const params = {
				...this.option,
				...this.form,
				url: '/pages/constructionSite/update'
			}
			if (this.imgList.length) {
				const imgPath = this.imgList.join(',')
				params.imgPath = imgPath
			}
			uni.navigateTo({
				url: `/pages/constructionSite/selStage${this.commonJS.queryData(params)}`
			})
		},
		showDateTime() {
			if (this.disabled) {
				return
			}
			this.$refs.dateTime.show()
		},
		dateTimeSubmit(e) {
			this.form.publish_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
		},
		chooseSpeech() {
			if (this.disabled) {
				return
			}
			const params = {
				...this.option,
				...this.form
			}
			if (this.imgList.length) {
				const imgPath = this.imgList.join(',')
				params.imgPath = imgPath
			}
			uni.navigateTo({
				url: `/pages/constructionSite/templateSpeech${this.commonJS.queryData(params)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
.app-wrap {
  min-height: 100vh;
  background-color: #f5f5f5;
}
.section {
    // margin-top: 20px;
    border-top: 20px solid #f5f5f5;
    box-sizing: border-box;
    background-color: #fff;
    // .left_label {
    //   font-size:14px;
    //   color:rgba(102,102,102,1);
    // }
}
.ph {
    font-size:24px;
    color:rgba(204,204,204,1);
}
.textarea_btn {
    position: absolute;
    left: 30px;
    bottom: 20px;
    padding: 0 22px;
    height:50px;
    line-height: 50px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238, 238, 238, 1);
    border-radius:25px;
    font-size:24px;
    color:rgba(51,51,51,1);
    box-sizing: border-box;
    z-index: 100;
}
.upload_wrap {
    background-color: #fff;
    position: relative;
    padding-top: 20px;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 60px);
        height: 1px;
        background:rgba(238,238,238,1);
    }
}
.confirm_btn {
    margin: 60px auto 0;
    width: calc(100% - 60px);
    text-align: center;
    height:90px;
    line-height: 90px;
    background:rgba(255,209,26,1);
    border-radius:45px;
    font-size:24px;
    color:rgba(58,27,4,1);
}

</style>
